import 'package:flutter/material.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/model/product.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';

class SingleItem extends StatefulWidget {
  final ProductModel product;

  const SingleItem({Key? key, required this.product}) : super(key: key);

  @override
  State<SingleItem> createState() => _SingleItemState();
}

class _SingleItemState extends State<SingleItem> {
  List<String> imgs = [
    'https://img1.baidu.com/it/u=858635807,3718531454&fm=253&fmt=auto&app=138&f=PNG?w=500&h=333',
    'https://img1.baidu.com/it/u=469912558,501769667&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500',
    'https://img.zcool.cn/community/0104af59ca5341a8012053f8884a48.jpg@3000w_1l_2o_100sh.jpg'
  ];

  double get leftWidth {
    return Sizes.default60;
  }

  double get rowHeight {
    return Sizes.default50;
  }

  List<String> tags = ['微辣', '中辣', '麻辣', '特辣'];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: Sizes.default50,
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
          child: Text('基本信息',
              style: StylesUtils.customTextStyle(
                  color: ColorsUtils.color797, fontSize: Sizes.default13)),
        ),
        Container(
          padding:
              const EdgeInsets.symmetric(vertical: Sizes.default10, horizontal: Sizes.default15),
          decoration: const BoxDecoration(color: Colors.white),
          child: ListBody(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: leftWidth,
                    alignment: Alignment.topLeft,
                    child: Text(
                      '商品图片',
                      style: StylesUtils.customTextStyle(color: ColorsUtils.color333),
                    ),
                  ),
                  Expanded(
                      child: Container(
                    alignment: Alignment.centerRight,
                    child: Wrap(
                      spacing: Sizes.default10,
                      runSpacing: Sizes.default10,
                      alignment: WrapAlignment.end,
                      runAlignment: WrapAlignment.end,
                      crossAxisAlignment: WrapCrossAlignment.center,
                      children: [
                        ...imgs.map((e) => GFImageOverlay(
                              image: NetworkImage(e),
                              width: Sizes.default80,
                              height: Sizes.default80,
                              borderRadius: BorderRadius.circular(Sizes.default5),
                            )),
                      ],
                    ),
                  ))
                ],
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '名称',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '河村石磨肠粉',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '商品分类',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '石磨肠粉',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '编号',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      'A024878',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('单点不配送',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                    Text(
                      '否',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Container(
          height: Sizes.default50,
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
          child: Text('商品描述',
              style: StylesUtils.customTextStyle(
                  color: ColorsUtils.color797, fontSize: Sizes.default13)),
        ),
        Container(
          padding:
              const EdgeInsets.symmetric(vertical: Sizes.default10, horizontal: Sizes.default15),
          decoration: const BoxDecoration(color: Colors.white),
          child: ListBody(
            children: [
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '商品类型',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '单品',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '描述',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '广西北海市河村地方特色早餐小吃',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '主料',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '大米',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('口味',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                    Text(
                      '清淡',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('制作时长',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                    Text(
                      '5 min',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Container(
          height: Sizes.default50,
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
          child: Text('规格属性',
              style: StylesUtils.customTextStyle(
                  color: ColorsUtils.color797, fontSize: Sizes.default13)),
        ),
        Container(
          padding:
              const EdgeInsets.symmetric(vertical: Sizes.default10, horizontal: Sizes.default15),
          decoration: const BoxDecoration(color: Colors.white),
          child: ListBody(
            children: [
              Container(
                decoration: BoxDecoration(
                    border: Border.all(color: ColorsUtils.rgba(228, 228, 228, 1)),
                    color: ColorsUtils.rgba(255, 255, 255, 1),
                    borderRadius: BorderRadius.circular(Sizes.default5)),
                padding: const EdgeInsets.all(Sizes.default10),
                margin: const EdgeInsets.only(bottom: Sizes.default20),
                child: ListBody(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: const EdgeInsets.only(bottom: Sizes.default15),
                      child: Text(
                        '【商品规格】',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('规格', style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                        Text('普通', style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                      ],
                    ),
                    Container(
                      margin: const EdgeInsets.symmetric(vertical: Sizes.default15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('价格',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                          Text('80 ￥',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                        ],
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('库存数量',
                            style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                        Text('100 份',
                            style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                      ],
                    ),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                    border: Border.all(color: ColorsUtils.rgba(228, 228, 228, 1)),
                    color: ColorsUtils.rgba(255, 255, 255, 1),
                    borderRadius: BorderRadius.circular(Sizes.default5)),
                padding: const EdgeInsets.all(Sizes.default10),
                margin: const EdgeInsets.only(bottom: Sizes.default20),
                child: ListBody(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: const EdgeInsets.only(bottom: Sizes.default15),
                      child: Text(
                        '【商品规格】',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('规格', style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                        Text('普通', style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                      ],
                    ),
                    Container(
                      margin: const EdgeInsets.symmetric(vertical: Sizes.default15),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text('价格',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                          Text('80 ￥',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                        ],
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('库存数量',
                            style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                        Text('100 份',
                            style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                      ],
                    ),
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                    border: Border.all(color: ColorsUtils.rgba(228, 228, 228, 1)),
                    color: ColorsUtils.rgba(255, 255, 255, 1),
                    borderRadius: BorderRadius.circular(Sizes.default5)),
                padding: const EdgeInsets.all(Sizes.default10),
                margin: const EdgeInsets.only(bottom: Sizes.default20),
                child: ListBody(
                  children: [
                    Container(
                      alignment: Alignment.centerLeft,
                      margin: const EdgeInsets.only(bottom: Sizes.default15),
                      child: Text(
                        '【商品属性】',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333),
                      ),
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text('属性', style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                        Text('辣度', style: StylesUtils.customTextStyle(color: ColorsUtils.color333)),
                      ],
                    ),
                    Container(
                        margin: const EdgeInsets.only(top: Sizes.default15),
                        alignment: Alignment.centerLeft,
                        child: GridView(
                            physics: const NeverScrollableScrollPhysics(),
                            padding: const EdgeInsets.symmetric(
                                horizontal: Sizes.default15, vertical: Sizes.default10),
                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 2,
                                mainAxisSpacing: Sizes.default10,
                                crossAxisSpacing: Sizes.default10,
                                childAspectRatio: 4.0 //宽高比为4
                                ),
                            shrinkWrap: true,
                            children: tags
                                .map((e) => Container(
                                    width: 120,
                                    height: 30,
                                    decoration: BoxDecoration(
                                        color: ColorsUtils.rgba(242, 242, 242, 1),
                                        borderRadius: BorderRadius.circular(Sizes.default5)),
                                    alignment: Alignment.center,
                                    child: Text(
                                      e,
                                      style: StylesUtils.customTextStyle(
                                          fontSize: Sizes.default13, color: ColorsUtils.color333),
                                    )))
                                .toList())),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('打包费',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                    Text(
                      '2 ￥/份',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Container(
          height: Sizes.default50,
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
          child: Text('限时限量',
              style: StylesUtils.customTextStyle(
                  color: ColorsUtils.color797, fontSize: Sizes.default13)),
        ),
        Container(
          padding:
              const EdgeInsets.symmetric(vertical: Sizes.default10, horizontal: Sizes.default15),
          decoration: const BoxDecoration(color: Colors.white),
          child: ListBody(
            children: [
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '是否限时开售',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '是',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '每日开售时间',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '10:00 - 14:00',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '是否限量供应',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '是',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('每日供应量',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                    Text(
                      '100',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        Container(
          height: Sizes.default50,
          alignment: Alignment.centerLeft,
          padding: const EdgeInsets.symmetric(horizontal: Sizes.default15),
          child: Text('新品促销',
              style: StylesUtils.customTextStyle(
                  color: ColorsUtils.color797, fontSize: Sizes.default13)),
        ),
        Container(
          padding:
          const EdgeInsets.symmetric(vertical: Sizes.default10, horizontal: Sizes.default15),
          decoration: const BoxDecoration(color: Colors.white),
          child: ListBody(
            children: [
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '是否新品',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '是',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '是否招牌菜',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '是',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                      '是否促销',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color333),
                    ),
                    Text(
                      '是',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('促销折扣',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                    Text(
                      '90%',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('生效日期',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                    Text(
                      '2023-10-01 至 2013-11-11',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('每人每天限购',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                    Text(
                      '1 份',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
              Container(
                height: rowHeight,
                alignment: Alignment.centerLeft,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('促销时段',
                        style: StylesUtils.customTextStyle(
                            fontSize: Sizes.default15, color: ColorsUtils.color333)),
                    Text(
                      '全天',
                      style: StylesUtils.customTextStyle(
                          fontSize: Sizes.default15, color: ColorsUtils.color797),
                    ),
                  ],
                ),
              ),
            ],
          ),
        )
      ],
    );
  }
}
